import React, { useState } from "react";
//从 antd 组件库中将 DataPicker 组件导入
import {
  Button,
  Checkbox,
  DatePicker,
  Form,
  Input,
  Pagination,
  Space,
  Typography,
} from "antd";
import { WechatOutlined, SearchOutlined } from "@ant-design/icons";

const { Text, Link, Paragraph } = Typography;
interface FormData {
  username: string;
  password: string;
  remember: boolean;
}
export default function AntdCom() {
  const [editableStr, setEditableStr] = useState<string>("love");
  //状态
  let [current, setCurrent] = useState<number>(1);
  let [pageSize, setPageSize] = useState<number>(5);

  //声明事件回调
  let onFinish = (value: FormData) => {
    //获取表单元素的值
    console.log(value);
  }

  let onFinishFailed= () => {
    console.log('失败');
  }

  return (
    <div style={{ padding: 50 }}>
      <h2>日期选择器</h2>
      <DatePicker />
      <h2>按钮</h2>
      <Button>按钮</Button>
      <Button type="primary">Primary Button</Button>
      <Button type="primary" danger>
        Primary Button
      </Button>
      <Button danger>Default</Button>
      <Button type="dashed" danger>
        文本
      </Button>
      <Button size="large">文本</Button>
      <Button type="primary" shape="circle" icon={<SearchOutlined />} />
      <h2>图标</h2>
      <WechatOutlined style={{ fontSize: 36, color: "#12d269" }} />
      <h2>排班</h2>
      <Text mark>Ant Design (mark)</Text>
      <Paragraph editable={{ onChange: setEditableStr }}>
        {editableStr}
      </Paragraph>
      <Paragraph copyable>我可以被复制哦, 点击一下就可以了</Paragraph>

      <h2>分页组件</h2>
      <Pagination
        total={50}
        current={current}
        pageSize={pageSize}
        //显示尺寸的改变器
        showSizeChanger={true}
        pageSizeOptions={[5, 10, 15, 20]}
        onChange={(page, pageSize) => {
          // console.log(page, pageSize);
          //更新状态 页码数
          setCurrent(page);
          //每页显示的数量
          setPageSize(pageSize);
        }}
      />

      <h2>表单组件</h2>
      <Form
        name="basic"
        labelCol={{ span: 2 }}
        wrapperCol={{ span: 22 }}
        //设置表单的默认值
        initialValues={{ remember: false, username: '占卦', password: 'xxx' }}
        // finish 事件 当表单在成功提交时触发
        onFinish={onFinish}
        // finishFailed 表单提交失败时触发
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[{ required: true, message: "请输入用户名~~" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: "请输入密码~~" }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          name="remember"
          valuePropName="checked"
          wrapperCol={{ offset: 2, span: 5 }}
        >
          <Checkbox>记住我</Checkbox>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 2, span: 5 }}>
          <Space>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
            <Button htmlType="reset">重置</Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
}
